<!-- 员工端-申请中心-我的发起 -->
<template>
  <div class="wrap">
    <a-space :size="16" style="margin-bottom: 10px">
      <span>状态：</span>
      <a-select style="width: 100px" :default-value="0">
        <a-option :value="0">全部</a-option>
        <a-option :value="1">待处理</a-option>
        <a-option :value="2">已处理</a-option>
      </a-select>

      <span>发送时间段：</span>
      <a-range-picker
        @change="onChange"
        @select="onSelect"
        style="width: 254px; marginbottom: 20px"
      />

      <a-input
        placeholder="输入事项名称或者发送人"
        style="width: 220px"
      ></a-input>
    </a-space>
    <TableTurn
      :tableData="getData"
      :args="args"
      ref="tableRef"
      :isShowPagination="false"
    >
      <a-table-column :width="80" title="序号">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        dataIndex="name"
        title="待办事项编号"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="mobile"
        title="待办事项名称"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="email"
        title="事项类型"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="region"
        title="发送人"
      ></a-table-column>
      <a-table-column
        :width="200"
        dataIndex="address"
        title="发送时间"
      ></a-table-column>
      <a-table-column :width="200" dataIndex="phone" title="状态">
        <template #cell="{ record }">
          <div class="state">
            <div
              class="cycle"
              :class="record.name === '北京' ? 'running-cycle' : 'finish-cycle'"
            ></div>
            <div :class="record.name === '北京' ? 'running' : 'finish'">
              {{ record.name === '北京' ? '待处理' : '已处理' }}
            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column
        :width="100"
        dataIndex="workPlace"
        title="操作"
        fixed="right"
      >
        <template #title>
          <a-tooltip content="是否显示筛选">
            <icon-font
              type="icon-filter-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="isFilter"
            />
          </a-tooltip>
          <a-tooltip content="表头设置">
            <icon-font
              type="icon-setting-def"
              :size="26"
              :style="{
                cursor: 'pointer'
              }"
              @click="isSetting"
            />
          </a-tooltip>
        </template>
        <template #cell="{ record }">
          <a-space>
            <a-tooltip content="处理">
              <icon-font
                type="icon-details-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="details(record)"
              />
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
</template>

<script lang="ts" setup>
import {
  GetWorkPlaceList,
  PostWorkPlaceList,
  DelWorkPlaceList
} from '@/apis/management/organization/organizationManagement';

// 获取表格数据
const getData = async (pageData?: any) => {
  try {
    const res = await GetWorkPlaceList({
      ...pageData
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.wrap {
  .state {
    display: flex;
    .cycle {
      position: relative;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      content: '';
      display: inline-block;
      top: 3px;
      right: 10px;
    }
  }
  // 已处理
  .finish {
    color: #31c27c;
  }
  .finish-cycle {
    background-color: #31c27c;
  }
  // 处理中
  .running {
    color: #3d7eff;
  }
  .running-cycle {
    background-color: #3d7eff;
  }
}
</style>
